<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="108px">
      <el-form-item label="废旧物资名称" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入废旧物资名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="审核状态" clearable size="small">
          <el-option
            v-for="dict in statusList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="送废班组" prop="scrapClass">
        <el-select filterable v-model="queryParams.scrapClass" placeholder="送废班组" clearable size="small">
          <el-option
            v-for="dict in scrapShiftListAll"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="收入仓库" prop="warehouse">
        <el-input
          v-model="queryParams.warehouse"
          placeholder="请输入收入仓库"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="撤旧来源" prop="source">
        <el-select v-model="queryParams.source" placeholder="撤旧来源" clearable size="small">
          <el-option
            v-for="dict in sourceList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处置方式" prop="dispose">
        <el-select v-model="queryParams.dispose" placeholder="处置方式" clearable size="small">
          <el-option
            v-for="dict in disposeList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="收料人" prop="receiver">
        <el-input
          v-model="queryParams.receiver"
          placeholder="请输入收料人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
<!--        <el-select v-model="queryParams.receiver" placeholder="收料人" clearable size="small">-->
<!--          <el-option-->
<!--            v-for="dict in receiverList"-->
<!--            :key="dict.dictValue"-->
<!--            :label="dict.dictLabel"-->
<!--            :value="dict.dictValue"-->
<!--          />-->
<!--        </el-select>-->
      </el-form-item>
      <el-form-item label="交料人" prop="deliverer">
        <el-input
          v-model="queryParams.deliverer"
          placeholder="请输入交料人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
<!--        <el-select v-model="queryParams.deliverer" placeholder="交料人" clearable size="small">-->
<!--          <el-option-->
<!--            v-for="dict in delivererList"-->
<!--            :key="dict.dictValue"-->
<!--            :label="dict.dictLabel"-->
<!--            :value="dict.dictValue"-->
<!--          />-->
<!--        </el-select>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="handleApply"
        >报废物资处置申请
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-document"
          size="mini"
          @click="printTable"
        >打印
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table  row-class-name="'active-row'" v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
      <el-table-column :selectable="isSelect" type="selection" width="55" align="center" style="background-color: red"/>
<!--      selectable="(row)=>row.status===1"-->
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="记录单id" align="center" prop="id"/>
      <el-table-column label="废旧物资名称" align="center" prop="goodsName"/>
      <el-table-column label="审核状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0" style="color: #1e1e1e">未申请</span>
          <span v-if="scope.row.status == 1" style="color: green">待审核</span>
          <span v-if="scope.row.status == 2" style="color: blue">审核通过</span>
          <span v-if="scope.row.status == 3" style="color: red">已驳回</span>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" prop="goodsSpec"/>
      <el-table-column label="数量" align="center" prop="goodsNum"/>
      <el-table-column label="计量单位" align="center" prop="goodsUnit"/>
      <el-table-column label="撤旧来源" align="center" prop="source">
        <template slot-scope="scope">
          {{ getLabelByCode(scope.row.source, sourceList) }}
        </template>
      </el-table-column>
      <el-table-column label="原安装使用处所" align="center" prop="originalUse"/>
      <el-table-column label="收入仓库名称" align="center" prop="warehouse"/>
      <el-table-column label="处置方式" align="center" prop="dispose">
        <template slot-scope="scope">
          {{ getLabelByCode(scope.row.dispose, disposeList) }}
        </template>
      </el-table-column>
      <el-table-column label="重量（千克）" align="center" prop="weight"/>
      <el-table-column label="送废班组" align="center" prop="scrapClassName"/>
<!--        <template slot-scope="scope">-->
<!--          {{ getLabelByCode(scope.row.scrapClass, scrapShiftList) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="送废时间" align="center" prop="scrapTime" width="180"/>
      <el-table-column label="收料人" align="center" prop="receiver"/>
<!--        <template slot-scope="scope">-->
<!--          {{ getLabelByCode(scope.row.receiver, receiverList) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="交料人" align="center" prop="deliverer"/>
<!--        <template slot-scope="scope">-->
<!--          {{ getLabelByCode(scope.row.deliverer, delivererList) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <!--      <el-table-column label="创建人" align="center" prop="createBy"/>-->
      <!--      <el-table-column label="创建时间" align="center" prop="createTime"/>-->
      <!--      <el-table-column label="修改人" align="center" prop="updateBy"/>-->
      <!--      <el-table-column label="修改时间" align="center" prop="updateTime"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.status == 0||scope.row.status == 3 || deptId==100"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 隐藏的打印表格 -->
    <div id="printTable" style="display: none;width: 100%">
      <div style="width: 100%;text-align: center;font-size: 20px;font-weight: 500;margin-bottom: 20px">废旧物资回收入库记录单</div>
      <el-table :data="postList">
        <el-table-column label="序号" align="center" type="index" width="45px"/>
        <el-table-column label="废旧物资名称" align="center" prop="goodsName" :style="{width: '10%'}"/>
        <el-table-column label="规格型号" align="center" prop="goodsSpec" style="width:5%"/>
        <el-table-column label="数量" align="center" prop="goodsNum" width="50px"/>
        <el-table-column label="计量单位" align="center" prop="goodsUnit" width="70px"/>
        <el-table-column label="撤旧来源" align="center" prop="source" width="80px">
          <template slot-scope="scope">
            {{ getLabelByCode(scope.row.source, sourceList) }}
          </template>
        </el-table-column>
        <el-table-column label="原安装使用处所" align="center" prop="originalUse" :style="{width: '10%'}"/>
        <el-table-column label="收入仓库名称" align="center" prop="warehouse" style="width:9%"/>
        <el-table-column label="处置方式" align="center" prop="dispose" width="70px">
          <template slot-scope="scope">
            {{ getLabelByCode(scope.row.dispose, disposeList) }}
          </template>
        </el-table-column>
        <el-table-column label="重量（千克）" align="center" prop="weight" style="width:4%"/>
        <el-table-column label="送废班组" align="center" prop="scrapClassName" style="width:9%"/>
<!--          <template slot-scope="scope">-->
<!--            -->
<!--            {{ getLabelByCode(scope.row.scrapClass, scrapShiftList) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="送废时间" align="center" prop="scrapTime" style="width:9%"/>
        <el-table-column label="收料人" align="center" prop="receiver" style="width:4%"/>
<!--          <template slot-scope="scope">-->
<!--            {{ getLabelByCode(scope.row.receiver, receiverList) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="交料人" align="center" prop="deliverer" style="width:4%"/>
<!--          <template slot-scope="scope">-->
<!--            {{ getLabelByCode(scope.row.deliverer, delivererList) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改记录单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px">
      <el-form class="scform" ref="form" :model="form" :rules="rules" label-width="120px"
               style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap"
      >
        <el-form-item label="废旧物资名称" prop="goodsName">
          <el-input v-model="form.goodsName" placeholder="请输入废旧物资名称" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="规格型号" prop="goodsSpec">
          <el-input v-model="form.goodsSpec" placeholder="请输入规格型号" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="数量" prop="goodsNum">
          <el-input-number v-model="form.goodsNum" controls-position="right" :min="0" :step="1" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="计量单位" prop="goodsUnit">
          <el-input v-model="form.goodsUnit" placeholder="请输入计量单位" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="撤旧来源" prop="source">
          <el-radio-group v-model="form.source">
            <el-radio
              v-for="dict in sourceList"
              :key="dict.dictValue"
              :value="dict.dictValue"
              :label="dict.dictValue"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原安装使用处所" prop="originalUse">
          <el-input v-model="form.originalUse" placeholder="请输入原安装使用处所" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="收入仓库名称" prop="warehouse">
          <el-input v-model="form.warehouse" placeholder="请输入收入仓库名称" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="处置方式" prop="dispose">
          <el-radio-group v-model="form.dispose">
            <el-radio
              v-for="dict in disposeList"
              :key="dict.dictValue"
              :value="dict.dictValue"
              :label="dict.dictValue"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="重量（千克）" prop="weight">
          <el-input v-model="form.weight" placeholder="请输入重量" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="送废班组" prop="scrapClass">
          <el-select v-model="form.scrapClass" placeholder="送废班组" clearable size="small">
            <el-option
              v-for="dict in scrapShiftList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="送废时间" prop="scrapTime">
          <el-date-picker
            v-model="form.scrapTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收料人" prop="receiver">
          <el-input v-model="form.receiver" placeholder="请输入收料人" style="width: 200px"/>
          <!--          <el-select v-model="form.receiver" placeholder="请选择收料人" clearable size="small">-->
<!--            <el-option-->
<!--              v-for="dict in receiverList"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            />-->
<!--          </el-select>-->
        </el-form-item>
        <el-form-item label="交料人" prop="deliverer">
          <el-input v-model="form.deliverer" placeholder="请输入交料人" style="width: 200px"/>
          <!--          <el-select v-model="form.deliverer" placeholder="请选择交料人" clearable size="small">-->
<!--            <el-option-->
<!--              v-for="dict in delivererList"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            />-->
<!--          </el-select>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="addLoading">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 填写申请单对话框 -->
    <el-dialog :title="applyTitle" :visible.sync="applyDialog" width="900px">
      <el-form class="scform" ref="applyForm" :model="applyForm" :rules="applyRules" label-width="120px"
               style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap"
      >
        <el-form-item label="车间主任" prop="workLeader">
          <el-select v-model="applyForm.workLeader" placeholder="审批人" clearable size="small">
            <el-option
              v-for="dict in workLeader"
              :key="dict.userId"
              :label="dict.nickName"
              :value="dict.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择科室审核人">
          <el-cascader
            v-model="selectedOptions"
            :options="options2"
            :props="{
    value: 'userId',
    label: 'nickName',
    children: 'auditor'
  }" @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="经办人电话" prop="workTel">
          <el-input v-model="applyForm.workTel" placeholder="请输入经办人电话" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="送报时间" prop="applyTime">
          <el-date-picker
            v-model="applyForm.applyTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-table :data="selectedRecords">
        <el-table-column label="废旧物资名称" align="center" prop="goodsName"/>
        <el-table-column label="规格型号" align="center" prop="goodsSpec"/>
        <el-table-column label="数量" align="center" prop="goodsNum"/>
        <el-table-column label="计量单位" align="center" prop="goodsUnit"/>
        <el-table-column label="重量（千克）" align="center" prop="weight"/>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unitPrice" placeholder="请输入单价"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="提货地点">
          <template slot-scope="scope">
            <el-input v-model="scope.row.place" placeholder="请输入提货地点"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="科室意见">
          <template slot-scope="scope">
            <el-input v-model="scope.row.idea" placeholder="请输入科室意见" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="detail" style="margin-top: 20px;">
        <div class="itmName">
          分管领导： {{ applyForm.leaderName }}
          <img :src="applyForm.leaderSign" class="img" v-if="applyForm.leaderSign"/>
        </div>
        <div class="itmName">
          业务科室负责人： {{ applyForm.deptLeaderName }}
          <img :src="applyForm.deptLeaderSign" class="img" v-if="applyForm.deptLeaderSign"/>
        </div>
        <div class="itmName">
          业务科室分管人员： {{ applyForm.deptStaffName }}
          <img :src="applyForm.deptStaffSign" class="img" v-if="applyForm.deptStaffSign"/>
        </div>
        <div class="itmName">
          车间主任： {{ applyForm.workLeaderName }}
          <img :src="applyForm.workLeaderSign" class="img" v-if="applyForm.workLeaderSign"/>
        </div>
        <div class="itmName">
          经办人： {{ applyForm.workStaffName }}
          <img :src="applyForm.workStaffSign" class="img" v-if="applyForm.workStaffSign"/>
        </div>
        <div class="itmName">
          联系电话： {{ applyForm.workTel }}
        </div>
      </div>
      <div class="sign-canvas">
        <div>电子签名处：</div>
        <sign-canvas style="display: block;" ref="SignCanvas" @write = "write"/>
        <div style="display: flex;flex-direction: column;justify-content: end;height: 300px;margin-left: 10px;">
          <el-button type="primary" plain @click="canvasClear">重新签名</el-button>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApplyForm" :loading="applyLoading">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--添加修改字典-->
    <el-dialog
      width="805px"
      :close-on-click-modal="false"
      title="记录单详情"
      :visible.sync="detailDialog"
    >
      <div class="detail">
        <div class="itm">废旧物资名称： {{ recordDetail.goodsName }}</div>
        <div class="itm">规格型号： {{ recordDetail.goodsSpec }}</div>
        <div class="itm">数量： {{ recordDetail.goodsNum }}</div>
        <div class="itm">计量单位： {{ recordDetail.goodsUnit }}</div>
        <div class="itm">撤旧来源：{{ getLabelByCode(recordDetail.source, sourceList) }}</div>
        <div class="itm">原安装使用处所： {{ recordDetail.originalUse }}</div>
        <div class="itm">收入仓库名称： {{ recordDetail.warehouse }}</div>
        <div class="itm">处置方式： {{ getLabelByCode(recordDetail.dispose,disposeList) }}</div>
        <div class="itm">重量（千克）： {{ recordDetail.weight }}</div>
        <div class="itm">送废班组：{{ getLabelByCode(recordDetail.scrapClass, scrapShiftListAll) }}</div>
        <div class="itm">送废时间： {{ recordDetail.scrapTime }}</div>
        <div class="itm">收料人： {{ recordDetail.receiver}}</div>
        <div class="itm">交料人： {{ recordDetail.deliverer }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listPost, getPost, delPost, addPost, updatePost, addApply, auditorList } from '@/api/system/scrap'
import PrintJS from 'print-js'
import SignCanvas from '../components/signCanvas'
import { listData } from '@/api/system/dict/data'
import Cookies from 'js-cookie'

export default {
  name: 'Post',
  components: { SignCanvas },
  dicts: ['sys_normal_disable'],
  data() {
    return {
      deptId : Cookies.get('deptId'),
      options:{
        isFullScreen: false,   ////是否全屏手写 [Boolean] 可选
        isFullCover: false, //是否全屏模式下覆盖所有的元素 [Boolean]   可选
        isDpr: false,       //是否使用dpr兼容高分屏 [Boolean] 可选
        lastWriteSpeed: 1,  //书写速度 [Number] 可选
        lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
        lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
        lineJoin: 'bevel',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 350, //canvas宽高 [Number] 可选
        canvasHeight: 370,  //高度  [Number] 可选
        isShowBorder: true, //是否显示边框 [可选]
        bgColor: '#fcc', //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#ff787f", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: '#101010', // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType:'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },
      applyLoading:false,
      selectedOptions: [],
      options2: [],
      userId: '',
      nickName: '',
      deptName: '',
      postName: '',
      workLeader: [],
      deptStaff: [],
      deptLeader: [],
      leader: [],
      addLoading: false,
      applyTitle: '填写报废物资处置申请单',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectedRecords: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层
      applyDialog: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        receiver: undefined,
        deliverer: undefined,
        warehouse: undefined,
        source: undefined,
        goodsName: undefined,
        dispose: undefined
      },
      // 表单参数
      form: {},
      applyForm: {},
      // 申请单表单校验
      applyRules: {
        // workLeader: [
        //   { required: true, message: '审批人不能为空', trigger: 'blur' }
        // ],
        deptStaff: [
          { required: true, message: '审批人不能为空', trigger: 'blur' }
        ],
        deptLeader: [
          { required: true, message: '审批人不能为空', trigger: 'blur' }
        ],
        leader: [
          { required: true, message: '审批人不能为空', trigger: 'blur' }
        ],
        workTel: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ],
        applyTime: [
          { required: true, message: '送报时间不能为空', trigger: 'blur' }
        ]
      },
      auditList: [],
      sign: '',
      // 表单校验
      rules: {
        goodsName: [
          { required: true, message: '废旧物资名称不能为空', trigger: 'blur' }
        ],
        goodsSpec: [
          { required: true, message: '规格型号不能为空', trigger: 'blur' }
        ],
        goodsNum: [
          { required: true, message: '数量不能为空', trigger: 'blur' }
        ],
        goodsUnit: [
          { required: true, message: '计量单位不能为空', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '撤旧来源不能为空', trigger: 'blur' }
        ],
        originalUse: [
          { required: true, message: '原安装使用处所不能为空', trigger: 'blur' }
        ],
        warehouse: [
          { required: true, message: '收入仓库名称不能为空', trigger: 'blur' }
        ],
        dispose: [
          { required: true, message: '处置方式不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '重量不能为空', trigger: 'blur' }
        ],
        scrapClass: [
          { required: true, message: '送废班组不能为空', trigger: 'blur' }
        ],
        scrapTime: [
          { required: true, message: '送废时间不能为空', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '收料人不能为空', trigger: 'blur' }
        ],
        deliverer: [
          { required: true, message: '交料人不能为空', trigger: 'blur' }
        ]
      },
      applyId: '',
      recordDetail: {},
      detailDialog: false,
      delivererList: [],
      receiverList: [],
      scrapShiftList: [],
      scrapShiftListAll:[],
      sourceList: [],
      disposeList: [],
      operatorList: [],
      statusList: [{
        dictLabel: '未申请',
        dictValue: 0
      }, {
        dictLabel: '待审核',
        dictValue: 1
      }, {
        dictLabel: '审核通过',
        dictValue: 2
      }, {
        dictLabel: '已驳回',
        dictValue: 3
      }]
    }
  },
  created() {
    this.getList()
  },
  // computed:{
  //   rowColor({ row }) {
  //     if (row.status == 0) {
  //       return 'active-row';
  //     } else if (row.status == 1) {
  //       return 'inactive-row';
  //     } else if (row.status == 2) {
  //       return 'inactive-row3';
  //     }
  //     // 可以添加更多状态对应的类名
  //     return 'inactive-row4';
  //   },
  // },
  methods: {
    isSelect(row) {
      console.log(row)
      return row.status == 0 || row.status == 3
    },
    getLabelByCode(code, list) {
      console.log(code)
      console.log(list)
      const foundLabel = list.find(item => item.dictValue == code)
      return foundLabel ? foundLabel.dictLabel : '未知'
    },
    /**
     * 清除画板
     */
    canvasClear() {
      this.$refs.SignCanvas.canvasClear()
      this.sign = ''
      this.write = false
    },
    write(){
      this.write = true
    },
    /**
     * 保存图片
     */
    saveAsImg() {
      this.sign = this.$refs.SignCanvas.saveAsImg()
      // alert(`image 的base64：${img}`)
    },
    //打印页面内容
    printTable() {
      // 显示隐藏的表格，用于打印
      document.getElementById('printTable').style.display = 'block'

      // 强制重新渲染，确保表格样式正确
      this.$nextTick(() => {
        let wpt = document.querySelector('#printTable')
        let newContent = wpt.innerHTML
        let oldContent = document.body.innerHTML
        document.body.innerHTML = newContent
        // 调用浏览器的打印功能
        window.print()
        history.go(0)
        document.body.innerHTML = oldContent
        // 打印完成后隐藏表格
        setTimeout(() => {
          document.getElementById('printTable').style.display = 'none'
        }, 500)
      })
    },
    validateField(row) {
      if (!row.place) {
        this.$message.error('提货地点是必填项')
        return false
      } else {
        // 如果有错误状态，这里可以清除错误提示
        return true
      }
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      const deptId = Cookies.get('deptId')
      // 班次车间
      listData({ dictType: 'scrap_shift',deptId:deptId }).then(response => {
        this.scrapShiftList = response.data
      })
      // 交料人
      listData({ dictType: 'deliverer' }).then(response => {
        this.delivererList = response.rows
      })
      // 收料人
      listData({ dictType: 'receiver' }).then(response => {
        this.receiverList = response.rows
      })
      // 撤旧来源
      listData({ dictType: 'deprecition_source' }).then(response => {
        this.sourceList = response.rows
      })
      // 处置方式
      listData({ dictType: 'dispose_way' }).then(response => {
        this.disposeList = response.rows
      })
      listData({ dictType: 'scrap_shift'}).then(res=> {
        this.scrapShiftListAll = res.rows
        if(deptId==100){
          this.scrapShiftList = res.rows
        }
        listPost(this.queryParams).then(response => {
          const rows=response.rows
          let newArray = rows.map(item => {
            console.log(item);
            item.scrapClassName = this.getLabelByCode(item.scrapClass, res.rows);
            console.log(item);
            return item; // 例子中返回每个元素的两倍
          });
          this.postList = newArray
          this.total = response.total
          this.loading = false
        })
      })
    },
    // 查询审核人列表
    getAuditList() {
      auditorList({ applyId: this.applyId }).then(response => {
        // this.auditList = response.data
        const { userId, nickName, deptName, postName, workLeader, deptStaff, deptLeader, leader } = response.data
        this.userId = userId
        this.nickName = nickName
        this.deptName = deptName
        this.postName = postName
        this.workLeader = workLeader
        this.deptStaff = deptStaff
        this.deptLeader = deptLeader
        this.leader = leader
        this.options2 = response.data.deptStaff
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.applyDialog = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {}
      this.applyForm = {
        nextAudit: undefined,
        workTel: undefined,
        applyTime: undefined
      }
      this.resetForm('form')
      this.resetForm('applyForm')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection)
      this.ids = selection.map(item => item.id)
      for (let i = 0; i < selection.length; i++) {
        selection[i].stockId = selection[i].id
        selection[i].place = selection[i].warehouse
      }
      this.selectedRecords = selection
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加废旧物资回收入库记录单'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id
      getPost(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改废旧物资回收入库记录单'
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.id != undefined) {
            updatePost(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addPost(this.form).then(response => {
              console.log(this.form)
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
          this.loading = false
        }
      })
    },
    submitApplyForm: function() {
      this.applyLoading = true
      this.$refs['applyForm'].validate(valid => {
        if (valid) {
          this.sign = this.$refs.SignCanvas.saveAsImg()
          console.log(this.sign)
          if (this.sign) {
            for (let i = 0; i < this.selectedRecords.length; i++) {
              if (!this.validateField(this.selectedRecords[i])) {
                return false
              }
            }
            this.applyForm.sign = this.sign
            this.applyForm.details = this.selectedRecords
            this.applyForm.deptStaff = this.selectedOptions[0]
            this.applyForm.deptLeader = this.selectedOptions[1]
            this.applyForm.leader = this.selectedOptions[2]
            if (this.applyForm.applyId != undefined) {
              addApply(this.applyForm).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.canvasClear()
                this.applyDialog = false
                this.getList()
              })
            } else {
              addApply(this.applyForm).then(response => {
                console.log(this.applyForm)
                this.$modal.msgSuccess('新增成功')
                this.getList()
                this.canvasClear()
                this.applyDialog = false
              })
            }
          } else {
            this.$message.error('请填写您的电子签名')
          }
        }
      })
      this.applyLoading = false
    },
    handleChange(value) {
      console.log('选中的值:', value);
      // 在这里处理用户选择的变化
    },
    detailSubmit() {
      this.detailDialog = false
    },
    // 填写申请单
    handleApply() {
      this.applyDialog = true
      this.getAuditList()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除记录单编号为"' + ids + '"的数据项？').then(function() {
        return delPost(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    // 详情
    handleDetail(row) {
      this.recordDetail = row
      this.detailDialog = true
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/scrap/stock/in/export', {
        ...this.queryParams
      }, `记录单${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style scoped lang="scss">
.scform {
  .el-form-item {
    width: 50%;
  }
}

.detail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .itm {
    width: 50%;
    margin-bottom: 10px;
  }

  .itmName {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 33%;
    margin-top: 20px;
  }

  .img {
    width: 100px;
    height: 50px;
    border: none !important;
    border-color: transparent;
  }
}

@media print {
  #printTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    /* 其他适合打印的样式 */
  }
  /* 根据需要调整表格单元格样式 */
  #printTable td, #printTable th {
    border: 1px solid black;
    padding: 8px 2px;
  }
}

@media print {
  @page {
    size: landscape;
    @top-center {
      content: "";
    }
    @bottom-center {
      content: "";
    }
    @top-right {
      content: "";
    }
    @bottom-left {
      content: "";
    }
    @bottom-right {
      content: "";
    }
  }
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    width: 100%;
  }

  .el-table th, .el-table td {
    white-space: nowrap;
    text-align: center;
  }

  .el-table-column--1 {
    width: 7% !important; /* 你可以根据需要调整这个值 */
  }
  header, footer, nav, aside, details {
    display: none;
  }
}

.sign-canvas {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.active-row {
  background-color: #ccb1ea; /* 活跃状态为绿色 */
  color: red;
}

.inactive-row {
  background-color: #97a8be; /* 非活跃状态为灰色 */
  color: red;
}
.inactive-row3 {
  background-color: #1ab394; /* 非活跃状态为灰色 */
  color: red;
}
.inactive-row4 {
  background-color: #1ab394; /* 非活跃状态为灰色 */
  color: red;
}

</style>
